<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@page import="cn.com.dhcc.ddi.datasource.vo.TableInfoVo" %>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<%@ include file="/WEB-INF/view/common/css_js_ztree.jsp"%>
<script type="text/javascript" src="${ctx}/static/js/ddi/datamapping/datamapping.js"></script>
<script type="text/javascript">
$(function() {
	$(window).bind('beforeunload', function() {
		if (isExit) {
			return '您输入的内容尚未保存，确定离开此页面吗？';
		}
	});
});	
</script>
<style type="text/css">
.label.arrowed-nn-right:after {
    right: -9.4px;
    border-width: 10px 5px;
}
</style>
<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页</li>
						<li>数据源映射管理</li>
						<li class="active">新增</li>
					</ul>
				</div>
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<div class="widget-toolbar no-border">
										<a class="btn btn-primary btn-xs"
											href="${ctx}/data_mapping/data_mapping_list.do"> <i
											class="icon-arrow-left"></i> 返回&nbsp;&nbsp;
										</a>
									</div>
								</div>
							    <div class="widget-body">
									<div class="widget-main">
										<form class="form-horizontal" role="form" id="inputForm"
											action="${ctx}/data_mapping/add_data_mapping.do" method="post">
											&nbsp;&nbsp;&nbsp;&nbsp;<span class="label label-primary arrowed-right arrowed-nn-right" >映射基本信息</span>
											<div class="profile-user-info profile-user-info-striped mg-top12" >
											    <div class="profile-info-row" style="height: 40px;">
											        <input type="text" name="id" id="mappingId" hidden="true">
													<div class="profile-info-name" style="padding-top:10px;">映射名称*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<input type="text" class="col-xs-10 col-sm-5" name="mappingName"
															id="mappingName" title="必填项,映射名称" placeholder="请输入映射名称"
															datatype="require|ajax|safeString2" value="${vo.mappingName}" oldValue="${vo.mappingName}" msg="请输入映射名称|已经被占用|不允许输入特殊字符"
															require="true" maxlength="200" url="${ctx}/data_mapping/is_mappingName_unique.do"/>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;">选择映射类型*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<input type="radio" id="mappingType" name="mappingType" value="1" checked="checked" onclick="changeMpTypeRadio()">结构化数据<-->结构化数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<!-- 现在只用结构化到结构化的，其他类型的后期可能会用 -->  
														<%-- <input type="radio" id="mappingType" name="mappingType" value="2" onclick="changeMpTypeRadio()">结构化数据<-->非结构化数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" id="mappingType" name="mappingType" value="3" onclick="changeMpTypeRadio()">非结构化数据<-->非结构化数据  --%>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;" >源端数据源*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<select class="col-xs-10 col-sm-5" name="srcDsId" id="srcDsId" datatype="require" msg="请选择源端数据源" require="true" onchange="changeSrcDs()">
															<option value="">-请选择源端数据源-</option>
															<c:forEach items="${dsData}" var="dsVo">
															 <option value="${dsVo.id}" dsType="${dsVo.type}" <c:if test="${dsVo.type ne 1}">style="display: none;"</c:if>>${dsVo.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												<div class="profile-info-row" style="height: 40px;">
													<div class="profile-info-name" style="padding-top: 10px;" >目的端数据源*</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<select class="col-xs-10 col-sm-5" name="destDsId" id="destDsId" datatype="require" msg="请选择目的端数据源" require="true">
															<option value="">-请选择目的端数据源-</option>
															<c:forEach items="${dsData}" var="dsVo">
															 <option value="${dsVo.id}" dsType="${dsVo.type}" <c:if test="${dsVo.type ne 1}">style="display: none;"</c:if> > ${dsVo.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												<div class="profile-info-row" style="height: 56px;">
													<div class="profile-info-name" style="padding-top: 10px;" >备注</div>
													<div class="profile-info-value" style="vertical-align: middle;">
														<textarea class="col-sm-5" placeholder="请输入备注"
														name="remark" id="remark" title="备注"></textarea>
													</div>
												</div>
											</div>
											<div class="mg-top12" style="margin-left: 12px;">
												<button type="button" class="btn btn-success btn-xs" id="mappingRuleAddBtn" onclick="DataMappingRuleAdd()">
												  <i class="icon-plus-sign icon-on-right"></i> 添加映射规则&nbsp;&nbsp;
											    </button>
											    &nbsp;&nbsp;&nbsp;&nbsp;
											    <button type="button" class="btn btn-success btn-xs" id="realTimePreviewBtn" onclick="realTimePreview()">
												  <i class="icon-eye-open icon-on-right"></i> 实时预览&nbsp;&nbsp;
											    </button>
											</div>
											<div class="table-responsive mg-top12 mg-left12" id="mappingRuleList" style="display: none;margin-right: 12px;">
												<span class="label label-primary arrowed-right arrowed-nn-right" >映射规则信息</span>
												<table class="table table-striped table-bordered table-hover mg-top12" style="margin-bottom:0px;">
													<thead>
														<tr>
															<th class="col-sm-1 center">序号</th>
															<th class="col-sm-8 center">映射规则</th>
															<th class="col-sm-1 center">操作</th>
														</tr>
													</thead>
													<tbody>
													  
													</tbody>
												</table>
											</div>

											<div class="mg-top12" id="realTimePreview" style="display: none;">
												<span class="label label-primary arrowed-right arrowed-nn-right" style="margin-left: 12px;">实时预览结果</span>
												<div class="row" style="margin-left: 0px; margin-right: 0px;margin-top: 10px;">
													<div class="col-xs-12">
														<div class="widget-box">
															<div class="widget-header widget-header-flat text-center">
															<!-- 	<div class="widget-toolbar no-border"> -->
																
																	<select style="margin-top:4px;width: 200px;" id="mappingSelectObject" onchange="changeMappingTable($('#mappingSelectObject').val())">
																		<option>请选择</option>
																		<option>1</option>
																	</select>
																	<span class="mg-left12" id="mappingTableIndex">1/2</span>
															<!-- 	</div> -->
															</div>
														</div>
														<div class="widget-body" style="margin-top: -3px;">
															<div class="widget-main">
																<div class="row" id="previewTable">
																	<div class="table-responsive mg-left12 pull-left"
																		id="befMapTab">
																		<span>原数据结构：<span id="mappingBeforeTabName">USERINFO</span></span>
																		<table
																			class="table table-striped table-bordered table-hover mg-top12"
																			style="width: 480px;">
																			<thead>
																				<tr>
																					<th class="">序号</th>
																					<th class="">项(英文名)</th>
																					<th class="">项(中文名)</th>
																					<th class="">类型</th>
																					<th class="">默认值</th>
																				</tr>
																			</thead>
																			<tbody>
																			
																			</tbody>
																		</table>
																	</div>
																	<div id="arrowID"
																		style="margin-top: 100px; margin-left: 34px;margin-right: 34px;"
																		class=" pull-left">
																		<div class="row">
																			<img alt=""
																				src="${ctx}/static/images/datamapping/arrows.png"
																				width="40px;">
																		</div>
																		<div class="row mg-top12 label label-sm label-success" id="ifIsomorphismFont">
																			<span class="" style="color: white; font-size: 14px;"><b>异构</b></span>
																		</div>


																	</div>
																	<div class="table-responsive  pull-left" id="afterMapTab">
																		<span>映射后结构：<span id="mappingAfterTabName">T_SUPT_USERINFO</span></span>
																		<table
																			class="table table-striped table-bordered table-hover mg-top12" style="width: 480px;">
																			<thead>
																				<tr>
																					<th class="">序号</th>
																					<th class="">项(英文名)</th>
																					<th class="">项(中文名)</th>
																					<th class="">类型</th>
																					<th class="">默认值</th>
																				</tr>
																			</thead>
																			<tbody>
																			
																			</tbody>
																		</table>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
												<div class="clearfix form-group mg-top12" id="sbmDiv" style="display: none;">
													<div align="center">
														<button type="submit" class="btn btn-sm btn-info"
															id="sbmBtn" onclick="submitBtn()"><i class="icon-ok bigger-110"></i>提交</button>
													</div>
												</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<div id="dataMappingRuleAddModal" class="modal fade" role="dialog" tabindex="0" aria-labelledby="查看" aria-hidden="false">
	<div class="modal-dialog" style="padding-top: 90px;width: 800px;">
		<div class="modal-content" style="width: 800px;">
		<div class='widget-header widget-header-small'><h6 class='smaller'> 添加映射规则</h6></div>
		<div id="dataMappingRuleAddDiv"></div>
		</div>
	</div>	
</div>
<div id="dataMappingChooseModal" class="modal fade" role="dialog" tabindex="0" aria-labelledby="查看" aria-hidden="false">
	<div class="modal-dialog" style="margin-top: 34px;width: 800px;">
		<div class="modal-content mg-top12" style="width: 800px;margin-top: 70px;">
		<!-- <div class='widget-header widget-header-small'><h6 class='smaller'> 选择映射规则</h6></div> -->
		<div id="dataMappingChooseDiv" ></div>
		</div>
	</div>	
</div>
</body>
</html>